import React, { useState, useEffect } from 'react'
import { SideBar } from 'antd-mobile'
import { getCategories } from '../../api/Category'
import type { CategoryAData, CategoryCData, CategoryBData } from '../../types/category'

export default function useCategory() {
  const [categories, setCategory] = useState<CategoryAData[]>([] as CategoryAData[])
  const [IdIndex, setIndex] = useState<number | string>(0)

  const getCateData = async () => {
    const res = await getCategories()
    setCategory(res.data)
  }

  let level2List = () => {
    if (categories[IdIndex as number]) {
      return categories[IdIndex as number].children
    }
  }
  useEffect(() => {
    getCateData()
  }, [])

  return (
    <div className='scroll-view-container'>
      <div className='left-scroll-view'>
        {
          categories.map((item, index) => (
            <div
              className={'left-scroll-view-item'}
              key={item.cat_id}
              style={
                IdIndex === index ? {
                  backgroundColor: "#ffffff",
                  position: "relative",
                  color: "#c00000"
                } : {}
              }
              onClick={() => setIndex(index)}
            >
              {item.cat_name}
            </div>
          ))
        }
      </div >
      <div className={'right-scroll-view'}>
        {
          level2List()?.map(item =>
            <div key="item.cat_id" className="cate-lv2-title">
              <h4>{item.cat_name}</h4>
              <div className="cate-lv3-list">
                {
                  item.children.map(subitem=>
                    <div className="cate-lv3-item" key={subitem.cat_id+10}>
                    <div style={{ width: "60px", height: "60px" }}>
                      <img src={subitem.cat_icon} style={{ width: "100%", height: "100%" }} />
                    </div>
                    <span className="name">{subitem.cat_name}</span>
                  </div>
                  )
                }
              </div>
            </div>
          )
        }
      </div >
    </div >
  )
}

{/* item.children.map(subitem =>
  <div className="cate-lv3-item" key="subitem.cat_id">
    <div style={{ width: "60px", height: "60px" }}>
      <img src="subitem.cat_icon" style={{ width: "100%", height: "100%" }} />
    </div>
    <span className="name">{subitem.cat_name}</span>
  </div>
) */}
